<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/wait-order.css" />
	</head>
	<body>
		<header>
			<img src="img/back.svg" class="back">
			<h1 class="mui-title">待收货订单</h1>
		</header>
		<ul id="chose" class="space-around">
			<li class="active">全部</li>
			<li>待付款</li>
			<li>待收货</li>
			<li>待评价</li>
		</ul>
		<div id="main">
			<div class="box" title="待收货 全部">
				<div class="box-head space-between">
					<span>订单编号：20180228415858</span>
					<span>已出库</span>
				</div>
				<ul class="boxul">
					<li class="space-between">
						<div class="shop-mes flex">
							<img src="img/clothing5.png" >
							<span>外套</span>
							<label>黄色</label>
						</div>
						<div class="shop-num">
							<span class="shop-count">x1</span>
							<span class="shop-value">1599元</span>
						</div>
					</li>
					<li class="space-between">
						<div class="shop-mes flex">
							<img src="img/clothing4.png" >
							<span>外套</span>
							<label>黑色</label>
						</div>
						<div class="shop-num">
							<span class="shop-count">x1</span>
							<span class="shop-value">1599元</span>
						</div>
					</li>
				</ul>
				<div class="btn">
					<button type="button" class="check">
					查看物流
				</button>
				</div>
				
				
			</div>
			<div class="box" title="待评价 全部">
				<div class="box-head space-between">
					<span>订单编号：20180228415859</span>
					<span>已收货</span>
				</div>
				<ul class="boxul">
					<li class="space-between">
						<div class="shop-mes flex">
							<img src="img/clothing5.png" >
							<span>外套</span>
							<label>黄色</label>
						</div>
						<div class="shop-num">
							<span class="shop-count">x1</span>
							<span class="shop-value">1599元</span>
						</div>
					</li>
					<li class="space-between">
						<div class="shop-mes flex">
							<img src="img/clothing4.png" >
							<span>外套</span>
							<label>黑色</label>
						</div>
						<div class="shop-num">
							<span class="shop-count">x1</span>
							<span class="shop-value">1599元</span>
						</div>
					</li>
				</ul>
				<div class="btn">
					<button type="button" class="check">
					评价
				</button>
				</div>
		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function tab(){
			let oul = document.getElementById('chose');
			let oli = document.getElementsByTagName('li');
			let box = document.getElementsByClassName('box');
			let n =0;
			for(let i =0;i<box.length;i++){
				if(box[i].title.indexOf(oli[n].textContent)!=-1){
					box[i].style.display='block';
				}
			}
			for(let i =0;i<oli.length;i++){
				oli[i].index=i
				oli[i].addEventListener('touchend',function(){
					for(let i =0; i<box.length;i++){
						box[i].style.display='none'
						if(box[i].title.indexOf(this.textContent)!=-1){
							box[i].style.display='block';
						}
						oli[n].classList.remove('active');
						oli[this.index].classList.add('active');
						n=this.index;
					}
				})
			}
		}
		 tab()
	</script>
</html>
